<template>
  <div class="guide-add-container">
    <!-- 左侧：原有内容 -->
    <div class="guide-add">
      <!-- 标题输入 -->
      <t-form :data="formData" label-width="80">
        <t-form-item label="标题" name="title" required>
          <t-input v-model="formData.title" placeholder="请输入指南标题" :maxlength="50" show-limit-number clearable />
        </t-form-item>

        <!-- 分类和封面在同一行 -->
        <div class="form-row">
          <!-- 图片上传 -->
          <t-form-item label="封面" name="imgUrl" required class="form-item-half">
            <!-- t-upload 只允许上传一张图片，显示进度，不显示文件名 -->
            <t-upload
              v-model="fileList"
              :request-method="customUpload"
              tips="支持jpg/png格式"
              theme="image"
              accept="image/*"
              :show-image-file-name="false"
              :show-upload-progress="true"
              :auto-upload="true"
              :multiple="false"
              :before-upload="beforeUpload"
            ></t-upload>
          </t-form-item>
          <!-- 分类选择下拉框 -->
          <t-form-item label="分类" name="categoryId" required class="form-item-half">
            <t-select v-model="formData.categoryId" placeholder="请选择指南分类" clearable>
              <t-option
                v-for="category in categoryOptions"
                :key="category.id"
                :value="category.id"
                :label="category.name"
              />
            </t-select>
          </t-form-item>
        </div>
      </t-form>

      <!-- 富文本编辑器 -->
      <Editor ref="editorRef" v-model="formData.content" @editorUpdate="handleEditorUpdate" />

      <!-- 操作按钮 -->
      <div style="margin-top: 12px">
        <t-button theme="primary" @click="handleSubmit">提交</t-button>
        <t-button style="margin-left: 8px" @click="handleBack">返回</t-button>
      </div>
    </div>
    <!-- 右侧：富文本示例 -->
    <div class="rich-text-demo">
      <div class="demo-phone">
        <!-- 手机壳图片 -->
        <img src="@/assets/phone.png" class="phone-frame-img" />
        <!-- 屏幕内容区域 -->
        <div class="demo-phone-content">
          <iframe
            ref="iframeRef"
            id="demo-modal"
            scrolling="auto"
            frameborder="0"
            src="https://parse.slovej.icu/"
            class="iframe"
            style="width: 100%; height: 100%"
          ></iframe>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 引入已封装的 tinymce 编辑器组件
// import Editor from '@/components/Editor/index.vue';
import { addGuide, getGuideDetail, updateGuide } from '@/api/guide';
import { getGuideCategoryList } from '@/api/guideCategory'; // 引入获取分类列表API
import type { GuideCategoryResponse } from '@/api/model/guideCategoryModel'; // 引入分类响应类型
import type { GuideAddRequest } from '@/api/model/guideModel'; // 修复类型导入
import { isContentEmpty } from '@/utils/isEmpty';
import { MessagePlugin } from 'tdesign-vue-next';
import { onActivated, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';

// 1. 引入类型
import Editor from '@/components/Editor/UEditorPlus.vue';
import { checkFileSize, checkFileType, commonFileUpload } from '@/utils/upload';
import type { RequestMethodResponse, UploadFile } from 'tdesign-vue-next';

// 表单数据 - 添加分类ID字段
const formData = ref({
  title: '',
  categoryId: undefined as number | undefined, // 分类ID
  content: '',
  imgUrl: '', // 封面图片地址
});

// 新增：用于 t-upload 组件的文件列表
const fileList = ref([]); // t-upload 需要数组类型

// 分类相关数据
const categoryOptions = ref<GuideCategoryResponse[]>([]); // 分类选项列表

const iframeRef = ref();
const route = useRoute();
const editorRef = ref();
const router = useRouter();

// 富文本编辑器内容更新处理
const handleEditorUpdate = (newContent: string) => {
  formData.value.content = newContent;
  sendContentToIframe(newContent); // 发送内容到 iframe
};

// 发送内容到iframe预览
const sendContentToIframe = (html: string) => {
  if (iframeRef.value && iframeRef.value.contentWindow) {
    // 使用 postMessage 发送 HTML 到 iframe
    iframeRef.value.contentWindow.postMessage(
      { type: 'UPDATE_CONTENT', html }, // 消息格式
      '*', // 目标 origin（* 表示任何，生产环境应指定具体域名）
    );
  }
};

// 2. 修改 customUpload 方法签名和返回值
const customUpload = async (file: UploadFile): Promise<RequestMethodResponse> => {
  return commonFileUpload(file, false, (url) => {
    // 设置url
    formData.value.imgUrl = url;
  });
};

/**
 * 上传前校验图片大小，限制为5MB
 * @param file 上传的文件对象
 * @returns boolean | Promise<boolean>
 */
const beforeUpload = (file: UploadFile) => {
  if (!checkFileType(file)) {
    MessagePlugin.error('请上传jpg或png格式的图片');
    return false;
  }
  return checkFileSize(file, 5, true);
};

// 获取分类列表数据
const fetchCategoryOptions = async () => {
  try {
    // 获取所有分类，设置较大的pageSize以获取所有数据
    const res = await getGuideCategoryList({
      pageNum: 1,
      pageSize: 1000, // 设置较大的值以获取所有分类
    });
    const records = res.data.data?.records ?? [];
    categoryOptions.value = records;
  } catch (e) {
    console.error('获取指南分类列表失败:', e);
    MessagePlugin.error('获取指南分类列表失败');
  }
};

// 封装一个初始化方法
const initForm = async () => {
  // 无论是新增还是编辑，都先查询分类数据
  await fetchCategoryOptions();

  const id = route.query.id;
  if (id) {
    // 编辑，获取详情并回显
    try {
      const res = await getGuideDetail(Number(id));
      formData.value.title = res.data.data?.title;
      formData.value.categoryId = res.data.data?.categoryId;
      formData.value.content = res.data.data?.content;
      formData.value.imgUrl = res.data.data?.imgUrl || '';
      // 如果有图片，回显到 fileList
      if (formData.value.imgUrl) {
        fileList.value = [
          {
            name: '封面',
            url: formData.value.imgUrl,
            status: 'success',
          },
        ];
      } else {
        fileList.value = [];
      }
    } catch (error) {
      MessagePlugin.error(error.message);
    }
  } else {
    // 新增，清空表单
    formData.value = {
      title: '',
      categoryId: undefined, // 清空分类ID
      content: '',
      imgUrl: '', // 清空图片
    };
    fileList.value = [];
  }
};

// 列表页激活时初始化表单
onActivated(() => {
  console.log('onActivated');
  initForm();
});

// 提交方法
const handleSubmit = async () => {
  // 去除首尾空格
  const title = formData.value.title.trim();
  console.log('title', title);

  // 判断是否为空、''、""、''，都不允许添加
  if (!title || title === '""' || title === "''") {
    MessagePlugin.error('请输入有效的指南标题，不能为引号或空字符串');
    return;
  }

  formData.value.title = title; // 保存去除空格后的内容

  // 验证分类
  if (!formData.value.categoryId) {
    MessagePlugin.error('请选择指南分类!');
    return;
  }

  // 新增：校验图片
  if (!formData.value.imgUrl) {
    MessagePlugin.error('请上传封面图片!');
    return;
  }

  // 验证内容
  if (isContentEmpty(formData.value.content)) {
    MessagePlugin.error('内容不能为空!');
    return;
  }

  // 构建请求数据
  const guideRequest: GuideAddRequest = {
    title: formData.value.title,
    categoryId: formData.value.categoryId, // 添加分类ID
    content: formData.value.content,
    imgUrl: formData.value.imgUrl, // 新增：图片地址
    isCheck: 0, // 只要是编辑过了，就要变为待审核的状态
  };

  if (route.query.id) {
    // 编辑模式
    guideRequest.id = Number(route.query.id);
    try {
      // 编辑接口
      await updateGuide(guideRequest);
      MessagePlugin.success('修改成功！');
      router.back();
    } catch (error) {
      MessagePlugin.error('要修改的' + error.message);
    }
  } else {
    // 新增模式
    try {
      await addGuide(guideRequest);
      MessagePlugin.success('新增成功！');
      router.back();
    } catch (error) {
      MessagePlugin.error('要新增的' + error.message);
    }
  }
};

// 返回方法
const handleBack = () => {
  router.back();
};
</script>

<style scoped>
/* 外层flex布局，左侧表单，右侧示例 */
.guide-add-container {
  display: flex; /* 使用flex布局 */
  align-items: flex-start;
  background: var(--td-bg-color-page, #f3f3f3); /* 使用主题变量，默认浅色背景 */
  min-height: 100vh;
}
/* 左侧表单样式，保持原有 */
.guide-add {
  background: var(--td-bg-color-container, #fff); /* 使用主题变量，默认白色背景 */
  padding: 24px;
  border-radius: 8px;
  max-width: 800px;
  margin: 0 100px 0 0; /* 右侧留空间 */
  flex: 1;
  border: 1px solid var(--td-border-level-1-color, #e7e7e7); /* 使用主题边框色 */
  box-shadow: 0 2px 8px var(--td-shadow-1, rgba(0, 0, 0, 0.1)); /* 使用主题阴影 */
}

/* 右侧富文本示例区 */
/* 外层自适应，最大宽度375px，高度812px，宽度100%优先 */
.rich-text-demo {
  width: 100%;
  /* max-width: 375px; 手机壳最大宽度 */
  max-width: 375px; /* 手机壳最大宽度 */
  height: auto;
  max-height: 812px; /* 手机壳最大高度 */
  margin: 150px auto 0 auto; /* 居中显示 */
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
}

/* 手机壳自适应 */
.demo-phone {
  width: 100%;
  max-width: 375px;
  height: auto;
  aspect-ratio: 375 / 812; /* 保持宽高比 */
  position: relative;
  background: transparent;
  overflow: hidden;
  border-radius: 60px;
  box-shadow: 0 0 16px var(--td-shadow-2, #e0e0e0); /* 使用主题阴影色 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 手机壳图片自适应 */
.phone-frame-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* 屏幕内容区域自适应 */
.demo-phone-content {
  position: absolute;
  top: 8%;
  left: 4%;
  width: 92%;
  height: 85%;
  z-index: 2;
  background: transparent;
  overflow: hidden;
  border-radius: 32px;
  box-shadow: none;
}

/* iframe 填满内容区 */
.demo-phone-content .iframe {
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
}

/* 表单行布局样式 */
.form-row {
  display: flex; /* 使用flex布局 */
  align-items: flex-start; /* 顶部对齐 */
}

/* 表单项半宽样式 */
.form-item-half {
  flex: 1; /* 让表单项占据一半宽度 */
  min-width: 0; /* 防止内容溢出 */
}

/* 确保表单项内的内容不会溢出 */
.form-item-half :deep(.t-form-item__content) {
  width: 100%;
}

/* 上传组件卡片容器样式 */
:deep(.t-upload__card-content) {
  height: 90px; /* 设置卡片容器高度 */
  width: 90px;
  min-width: 90px;
  max-width: 90px;
}
:deep(.t-upload__card-container) {
  height: 90px; /* 设置卡片容器高度 */
  width: 90px;
  min-width: 90px;
  max-width: 90px;
}
</style>
